{extend name="common/index"}
{block name="css"}
<link rel="stylesheet" href="__STATIC__/plugins/layui_formSelects/formSelects-v4.css">
<style>
    {empty name="data.img_url"}
    .image-url .image-preview {display: none;}/*隐藏图片*/
    {else/}
    .image-url .image-text {display: none;}/*隐藏文字*/
    {/empty}
</style>
{/block}

{block name="content"}
<div class="layui-row">
    <form id="editForm" class="layui-form" action="">
        <input type="hidden" name="art_id" id="art_id" value="{$data.art_id|default=''}">
        <div class="layui-field-box">
            <div class="layui-main">
                <div class="layui-form-item">
                    <label class="layui-form-label">缩略图：<br>(310*310)</label>
                    <div class="layui-input-block image-url">
                        <div class="layui-upload-drag">
                            <div class="image-text">
                                <i class="layui-icon layui-icon-upload"></i>
                                <p>点击上传，或将文件拖拽到此处</p>
                            </div>
                            <div class="image-preview">
                                <input type="hidden" name="img_url" value="{$data.img_url|default=''}" data-id="{$data.art_id|default=''}" data-table="article">
                                <img src="{$data.img_url|default=''}" alt="图片">
                                <div class="tools tools-bottom">
                                    <a href="javascript:void(0);" onclick="delImgAjax(this);">
                                        <i class="layui-icon layui-icon-delete"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red;">*&nbsp;</span>所属板块：</label>
                    <div class="layui-input-block">
                        {notempty name="basicList"}
                        {volist name="basicList" id="vo"}
                        {eq name="vo.cat_code" value="AD"}
                        <input type="radio" name="cat_type" value="{$vo.basic_id}" title="{$vo.basic_name}" lay-filter="changeType" {eq name="vo.basic_id" value="$data.cat_type|default='0'" }checked{/eq}>
                        {/eq}
                        {/volist}
                        {/notempty}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><span style="color: red;">*&nbsp;</span>文章栏目：</label>
                    <div class="layui-input-block">
                        <select name="cat_id" lay-verify="required" id="cat-id">
                            <option value="">请选择</option>
                            {$catList}
                        </select>
                        <span style="color: #FFB800;">切换版块，显示对应的栏目候选项</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">扩展栏目：</label>
                    <div class="layui-input-block">
                        <select name="cat_id_ext" xm-select="cat-id-ext">
                            <option value="">请选择</option>
                            {$catExtList}
                        </select>
                        <span style="color: #FFB800;">用于前端按不同类别浏览</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文章标题：</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" value="{$data.title|default=''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">副标题：</label>
                    <div class="layui-input-block">
                        <input type="text" name="title_sub" value="{$data.title_sub|default=''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接：</label>
                    <div class="layui-input-block">
                        <input type="text" name="link" value="{$data.link|default=''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">地点：</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" value="{$data.address|default=''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">人数：</label>
                    <div class="layui-input-block">
                        <input type="number" name="people_num" value="{$data.people_num|default='0'}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键字：</label>
                    <div class="layui-input-block">
                        <input type="text" name="keywords" value="{$data.keywords|default=''}" class="layui-input">
                        <span style="color: #FFB800;">用于seo搜索优化</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文章作者：</label>
                    <div class="layui-input-block">
                        <input type="text" name="author" value="{$data.author|default=''}" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文章排序：</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort_num" value="{$data.sort_num|default='1'}" placeholder="数字越小，越靠前" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否发布：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="state" value="1" title="是" lay-filter="changeState" {eq name="data.state|default='1'" value="1"}checked{/eq}>
                        <input type="radio" name="state" value="0" title="否" lay-filter="changeState" {eq name="data.state|default='1'" value="0"}checked{/eq}>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">定时发布：</label>
                    <div class="layui-input-block">
                        <input type="text" name="public_time" id="public_time" value="{$data.public_date_hh_ii_ss|default=''}" class='layui-input'>
                        <span style="color: #FFB800;">发布状态为“否”时，按该时间定时发布 </span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">推荐等级：</label>
                    <div class="layui-input-block">
                        {volist name="levelList" id="vo"}
                        <input type="radio" name="level" value="{$vo.basic_id}" title="{$vo.basic_name}" {eq name="vo.basic_id" value="$data.level|default='169'" }checked{/eq}>
                        {/volist}
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">描述简介：</label>
                    <div class="layui-input-block">
                        <textarea name="describe" class="layui-textarea">{$data.describe|default=''}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">文章内容：</label>
                    <div class="layui-input-block">
                        <!-- 加载编辑器的容器 -->
                        <script id="art-content" name="content" type="text/html">{$data.content|default=''}</script>
                    </div>
                </div>
            </div>
            <div class="tpl-form-action">
                <button class="layui-btn layui-btn-radius layui-btn-lg" lay-submit lay-filter="formSubmit">保存</button>
            </div>
        </div>
    </form>
</div>
{/block}

{block name="script"}
<script type="text/javascript" src="__STATIC__/plugins/ueditor/ueditor.config.js"></script><!-- 编辑器配置文件 -->
<script type="text/javascript" src="__STATIC__/plugins/ueditor/ueditor.all.min.js"></script><!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__/plugins/layui_formSelects/formSelects-v4.js"></script>

<script type="text/javascript">
    var cat_type = $('input:radio[name="cat_type"]:checked').val();//获取点击前的版块值
    layui.use(['form', 'laydate'], function () {
        var form = layui.form;
        var laydate = layui.laydate;
        var formSelects = layui.formSelects;

        //实例化时间插件
        laydate.render({elem: '#public_time' ,type: 'datetime'});
        //上传图片
        uploadImgAjax('.image-url', '{:url("uploadImg")}', 4096);

        //radio单选框被点击时触发
        form.on('radio(changeType)', function(data){
            if (data.value == cat_type) {
                return false;//值未变更，则终止
            }
            cat_type = $('input:radio[name="cat_type"]:checked').val();//赋值变更后的值
            var index = layer.load(2, {time: 10*1000});
            $.post('{:url("getCatListOptionTree")}', {cat_type:data.value}, function (result) {
                layer.close(index);
                if (result.code) {
                    $('#cat-id').html('<option value="">请选择</option>' + result.data.option_tree);
                    form.render('select');
                    //重新渲染所有的已存在多选
                    formSelects.data('cat-id-ext', 'local', {
                        arr: result.data.table_tree
                    }).render('cat-id-ext');
                } else {
                    layer.alert(result.msg);
                }
            }, 'json');
        });

        //监听提交
        form.on('submit(formSubmit)', function(data){
            var index = layer.load(2, {shade:[0.5,'#000'],time: 10*1000});
            $.post('{:url("save")}', $('#editForm').serialize(), function (result) {
                layer.close(index);
                if (result.code) {
                    layer.msg(result.msg, {shade:[0.5,'#000'],time:1000}, function () {
                        window.location.href = result.url;
                    });
                } else {
                    layer.alert(result.msg, {icon:2, title:'保存失败！'});
                }
            }, 'json');
            return false;
        });
    });

    //实例化编辑器*
    UE.getEditor('art-content');
</script>
{/block}